<template>
    <div class="box" @click="change" :class="{ open: !value,noanimation:!click }">
        <span class="one item"></span>
        <span class="two item"></span>
        <span class="three item"></span>
    </div>  
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  data() {
    return {
      click: false
    };
  },
  methods: {
    change() {
      this.click = true;
      this.$emit("input", !this.value);
    }
  }
};
</script>

<style scoped>
.box {
  height: 30px;
  width: 38px;
  position: absolute;
  cursor: pointer;
  padding: 0;
  display: inline-block;
}
.box span {
  position: absolute;
  display: block;
  width: 23.5px;
  height: 3px;
  background: #000;
  margin: 4px;
}
.box .one {
  top: 0;
  animation: closeone 0.7s;
}
@keyframes closeone {
  0% {
    top: 7px;
    transform: rotate(45deg);
  }
  50% {
    top: 7px;
    transform: rotate(0);
  }
  100% {
    top: 0;
    transform: rotate(0);
  }
}
.box .two {
  top: 7px;
  opacity: 1;
  animation: closetwo 0.7s;
}
@keyframes closetwo {
  0% {
    top: 7px;
    opacity: 0;
  }
  50% {
    top: 7px;
    opacity: 0;
  }
  51% {
    top: 7px;
    opacity: 1;
  }
  100% {
    top: 7px;
    opacity: 1;
  }
}
.box .three {
  top: 14px;
  animation: closethree 0.7s;
}
@keyframes closethree {
  0% {
    top: 7px;
    transform: rotate(-45deg);
  }
  50% {
    top: 7px;
    transform: rotate(0);
  }
  100% {
    top: 14px;
    transform: rotate(0);
  }
}
.open .one {
  top: 7px;
  transform: rotate(45deg);
  animation: one 0.7s;
}
@keyframes one {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 7px;
    transform: rotate(0);
  }
  100% {
    top: 7px;
    transform: rotate(45deg);
  }
}
.open .two {
  top: 7px;
  opacity: 0;
  animation: two 0.7s;
}
@keyframes two {
  0% {
    top: 7px;
    opacity: 1;
  }
  50% {
    top: 7px;
    opacity: 1;
  }
  50.1% {
    top: 7px;
    opacity: 0;
  }
  100% {
    top: 7px;
    opacity: 0;
  }
}
.open .three {
  top: 7px;
  transform: rotate(-45deg);
  animation: three 0.7s;
}
@keyframes three {
  0% {
    top: 14px;
    transform: rotate(0);
  }
  50% {
    top: 7px;
    transform: rotate(0);
  }
  100% {
    top: 7px;
    transform: rotate(-45deg);
  }
}
.noanimation .item {
  animation: none;
}
</style>
